<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>computeUnitOfWork</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../../libs/babel.min.js"></script>
    <script src="../../libs/react-17.0.2.js"></script>
    <script src="../../libs/react-dom-17.0.2.js"></script>
    <script type="text/babel">
      class ClassChild extends React.Component {
        componentWillUnmount() {
          console.log("ClassChild componentWillUnmount")
        }
        render() {
          return <div>this is ClassChild</div>
        }
      }
      const FunctionalChild11 = props => {
        React.useEffect(() => {
          console.log("FunctionalChild11 useEffect create")

          return () => {
            console.log("FunctionalChild11 useEffect destroy")
          }
        }, [])
        React.useLayoutEffect(() => {
          console.log("FunctionalChild11 useLayoutEffect create")
          return () => {
            console.log("FunctionalChild11 useLayoutEffect destroy")
          }
        }, [])

        return <div>this is FunctionalChild1 {props.count}</div>
      }
      const FunctionalChild12 = props => {
        React.useEffect(() => {
          console.log("FunctionalChild12 useEffect create")
          return () => {
            console.log("FunctionalChild12 useEffect destroy")
          }
        }, [])
        React.useLayoutEffect(() => {
          console.log("FunctionalChild12 useLayoutEffect create")
          return () => {
            console.log("FunctionalChild12 useLayoutEffect destroy")
          }
        }, [])

        return <div>this is FunctionalChild1 {props.count}</div>
      }
      const FunctionalChild1 = props => {
        React.useEffect(() => {
          console.log("FunctionalChild1 useEffect create")
          return () => {
            console.log("FunctionalChild1 useEffect destroy")
          }
        }, [])
        React.useLayoutEffect(() => {
          console.log("FunctionalChild1 useLayoutEffect create")
          return () => {
            console.log("FunctionalChild1 useLayoutEffect destroy")
          }
        }, [])

        return (
          <div>
            this is FunctionalChild1
            <FunctionalChild11 />
            <FunctionalChild12 />
          </div>
        )
      }

      const Child = () => {
        const [visible, setVisible] = React.useState(true)
        const handleClickBtn = () => {
          setVisible(!visible)
        }
        return (
          <div>
            <button onClick={handleClickBtn}>切换</button>
            {visible && (
              <>
                <ClassChild />
                <FunctionalChild1 />
              </>
            )}
          </div>
        )
      }
      const App = props => {
        return (
          <div>
            <Child />
          </div>
        )
      }
      const root = document.getElementById("root")
      ReactDOM.render(<App app={1} />, root)
      console.dir(root)
    </script>
  </body>
</html>
